<template>
	<div>
		<scroll class="searchjianyi" v-if='searchlist' ref="searchlis2" :data="searchlist.artists">
			<div>
				<div class="listtit">单曲<span v-if='searchlist.songCount'>({{searchlist.songCount}})</span></div>
				<div v-for="(songed,index) in searchlist.songs" class="listcont" @click="played(index)">
					<div>
						<span>{{songed.name}}</span>
						<div v-for="i in songed.artists">
							{{i.name}}
						</div>
					</div>
					<div>
						<span class="mui-icon mui-icon-more" @click.stop="addsong(index)"></span>
						<div class="more" v-show="selectmore==index">
							<p @click.stop="addlist(index)">添加播放列表</p>
							<p>详细信息</p>
						</div>
					</div>
				</div>
				<div class="listtit">专辑</div>
				<div v-for="(songed,index) in searchlist.songs" class="listcont" @click="played(index)">
					<span><img :src="songed.album.picUrl" alt="" width="45" /></span>
					<span>{{songed.album.name}}</span>
				</div>
			</div>
		</scroll>
	</div>
</template>
<script>
	import { mapGetters, mapState } from 'vuex'
	import Scroll from './scroll'
	export default {
		data() {
			return {
				moremenu: false,

				selectmore: -1
			}
		},
		computed: {
			...mapGetters([
				'searchlist',
			]),
		},
		methods: {
			addsong(index) {
				this.selectmore = index
			},
			addlist(index) {
				//console.log(this.searchlist.songs[index])	
				this.selectmore = -1
				var value = this.searchlist.songs[index]
				this.$store.dispatch("getcollect", [value, index])	
			},
			played(index) {
				this.$store.dispatch("audioshow");
				var thissong = this.searchlist.songs[index]
				this.$store.dispatch('dataurl', thissong)
				console.log(thissong.id)
				this.$store.dispatch('isplaying')
			}
		},
		components: {
			Scroll
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	.searchjianyi {
		margin-top: 6vh;
		overflow: hidden;
		height: 94vh;
		.listtit {
			width: 100%;
			background: rgba(255, 255, 255, 0.3);
			color: #fff;
			font-size: 14px;
			padding: 5PX 5PX;
		}
		.listcont {
			color: #32D6EE;
			border-bottom: 1px rgba(255, 255, 255, 0.2) solid;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			div:nth-child(1) {
				span {
					color: #32D6EE;
					vertical-align: middle;
				}
				div {
					color: #fff;
					font-size: 12px;
				}
			}
			.more {
				position: absolute;
				width: 22vh;
				right: 5px;
				background: rgba(0, 0, 0, 0.7);
				padding: 5px;
				border-radius: 7px;
				p {
					color: #fff;
					font-size: 14px;
					padding: 5px;
					margin-bottom: 0;
				}
			}
		}
	}
</style>